<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>资源互通关联</title>
<link type="text/css" href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="<%=basePath%>css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/jqcloud.css" />
<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jqcloud-1.0.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap.min.js"></script>
</head>
<body id="body" style="padding: 0px;">
	<div id="container" class="container-fluid" style='height: inherit; padding-left: 25px; padding-right: 25px'>
		<div class="row-fluid">
			<div class="column">
				<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">资源互通关联</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li id="instrumentButton"><a href="javascript:void(0);">仪器</a></li>
						<li id="institutionButton" class="active"><a href="javascript:void(0);">机构</a></li>
						<li id="projectButton"><a href="javascript:void(0);">检测项目</a></li>
						<li id="talentButton"><a href="javascript:void(0);">人才</a></li>
						<li id="baseButton"><a href="javascript:void(0);">基地</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="javaScript:void(0)" id="navt6_list" onclick="homePage('institution');">返回</a></li>
					</ul>
				</div>
				</nav>
			</div>
		</div>

		<div class="row-fluid">
			<div class="span6 column">
				<c:if test="${!empty instruments}">
					<div id="div1" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc1" class="panel-title">相关仪器</h3>
						</div>
						<div class="panel-body">
							<div id="tagCloud" style="height: 300px"></div>
						</div>
					</div>
				</c:if>
				<c:if test="${!empty talents}">
					<div id="div4" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc4" class="panel-title">相关人才</h3>
						</div>
						<div class="panel-body">
							<div id="relationGraph" style="height: 400px; width: 100%; left: 0; top: 10;"></div>
						</div>
					</div>
				</c:if>
				<c:if test="${!empty bases}">
					<div id="div5" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc5" class="panel-title">相关基地</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody  id="btable">
									<c:forEach var="item" items="${bases}">
										<tr>
											<td><a href="/relation/syjd.ins?id=${item[0]}">${item[1]}</a></td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
							<input type="hidden" id="base_start" value='0' />
							<c:if test="${fn:length(bases) >= 3}">
								<button type="button" id="bmore" class="btn btn-info" onclick="javascript:getMoreBase()">更多</button>
							</c:if>
						</div>
					</div>
				</c:if>
				<c:if test="${!empty projects}">
					<div id="div3" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc3" class="panel-title">相关检测项目</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody id="ptable">
									<c:forEach var="item" items="${projects}">
										<tr>
											<td><a href="/relation/xm.ins?id=${item[0]}">${item[1]}</a></td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
							<input type="hidden" id="project_start" value='0' />
							<c:if test="${fn:length(projects) >= 3}">
								<button type="button" id="pmore" class="btn btn-info" onclick="javascript:getMoreProject()">更多</button>
							</c:if>
						</div>
					</div>
				</c:if>

			</div>
			<div class="span6">
				<c:if test="${!empty instituion}">
					<div id="div2" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc2" class="panel-title">机构详情</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody>
									<c:forEach var="item" items="${instituion}">
										<tr>
											<td>${item.key}</td>
											<td>${item.value}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</c:if>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="<%=basePath%>echarts/echarts.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>echarts/echarts-wordcloud.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>echarts/theme/macarons.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/relation.js"></script>
	<script type="text/javascript">
		
// 		function generateTagCloud(){
// 			var tags = [];
// 			<c:forEach var="item" items="${instruments}">
// 				tags.push({
// 			    	text: "${item[1]}", 
// 			    	weight:  Math.ceil(Math.random()*3),
// 			    	link: "/relation/dxyq.ins?id=${item[0]}"
// 				});
// 			</c:forEach>
// 			$("#tagCloud").jQCloud(tags);
// 		}
// 		generateTagCloud();
		function generateTagCloud(){
			var tagCloud = echarts.init(document.getElementById('tagCloud'), "macarons");
			var option = {
				tooltip: {},
				series: [{
					type: 'wordCloud',
					gridSize: 20,
					sizeRange: [12, 60],
					rotationRange: [0, 0],
					shape: 'circle',
					textStyle: {
						normal: {
							color: function() {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: []
				}]
			};
			<c:forEach var="item" items="${instruments}">
				option.series[0].data.push({
			    	name: "${item[1]}", 
			    	value: "${item[0]}"
				});
			</c:forEach>
			tagCloud.on('click', function (params) {
				window.location.href = "/relation/dxyq.ins?id="+params.value;
	    		return;
			});
			tagCloud.setOption(option);
		}
		generateTagCloud();
		
		function generateRelationEchart(){	
			var option = {
				tooltip: {
				    trigger: 'item',
				    formatter: '{b}'
				},
				legend: {
				    x: 'left',
				    data: ['人才','机构']
				},
				series: [{
			        type: 'graph',
			        layout: 'force',
			        symbol: "circle",
			        symbolSize: 60,
			        roam: true, //禁止用鼠标滚轮缩小放大效果
			        //edgeSymbol: ['circle', 'arrow'],
			        //edgeSymbolSize: [0, 10],
			        // 连接线上的文字
			        // focusNodeAdjacency: true, //划过只显示对应关系
				    categories: [
				        {
				            name: '人才'
				        },
				        {
				            name: '机构'
				        }
				    ],
					lineStyle: {
			            normal: {
			                opacity: 1,   // 不透明
			                width: 2,	  // 线宽
			                curveness: 0  // 不弯曲
			            }
			        },
			        // 圆圈内的文字
			        label: {
			            normal: {
			                show: true
			            }
			        },
			        force: {
			            repulsion: 2000   // 力引导布局斥力因子
			        },
				    draggable: 'false',
				    data: [],
				    links: []
				}]
			};
		
			if (document.getElementById('relationGraph') != null) {
			    var relationGraph = echarts.init(document.getElementById('relationGraph'), "macarons");
			    option.series[0].data = [];
			    option.series[0].links = [];
			    var ins_name = "${instituion.get('机构名称')}";
			    var ins_code = "${instituion.get('机构编码')}";
			    //console.log(ins_name);
		    	option.series[0].data.push({
		    		name: ins_name,
		            category: 1,
		            symbolSize: 100,
		            value : ins_code
		    	});
			    <c:forEach var="item" items="${talents}"> 
			    	option.series[0].data.push({
			    		name: "${item[1]}",
			            category: 0,
			            value : "${item[0]}"
			    	});
			    	option.series[0].links.push({
			            source: ins_name,
			            target: "${item[1]}",
			            value: "朋友"
			        });
				</c:forEach> 
		    	relationGraph.on('click', function (params) {
		    		//console.log(params);
					if(params.data.category == 1){
						window.location.href = "<%=basePath%>relation/dw.ins?id="+params.value;
					}else {
		    			window.location.href = "<%=basePath%>relation/ry.ins?id="+params.value;
					}
		    		return;
				});
			    relationGraph.setOption(option);
			}
		}
		generateRelationEchart();
		
		function getMoreBase(){
			start = Number($("#base_start").val())+Number(5);
		    $.ajax({
		        type: "GET",
		        url: "/relation/dw_add.ins",
		        data: {id: '${id}', resource: 'base', start: start},
		        cache: false,
		        dataType: 'json',
		        beforeSend: function () {
		            $('#bmore').button('loading');
		        },
		        success: function (data) {
		        	console.log(data);
		            $(data).each(function (i, item) {
		            	 $("#btable").append("<tr><td><a href='/relation/syjd.ins?id="+item[0]+"'>"+item[1]+"</a></td></tr>");
		            });
		            if (data == null || data.length < 5) {
		                $("#bmore").hide();
		            }
		            $("#base_start").val(start + 5);
		            $('#bmore').removeAttr("disabled");
		            $('#bmore').button('reset');
		        },
		        error: function () {
		        }
		    });
		}
		
		function getMoreProject(){
			start = Number($("#project_start").val())+Number(5);
		    $.ajax({
		        type: "GET",
		        url: "/relation/dw_add.ins",
		        data: {id: '${id}', resource: 'project', start: start},
		        cache: false,
		        dataType: 'json',
		        beforeSend: function () {
		            $('#pmore').button('loading');
		        },
		        success: function (data) {
		        	console.log(data);
		            $(data).each(function (i, item) {
		            	 $("#ptable").append("<tr><td><a href='/relation/xm.ins?id="+item[0]+"'>"+item[1]+"</a></td></tr>");
		            });
		            if (data == null || data.length < 5) {
		                $("#pmore").hide();
		            }
		            $("#project_start").val(start + 5);
		            $('#pmore').removeAttr("disabled");
		            $('#pmore').button('reset');
		        },
		        error: function () {
		        }
		    });
		}
	</script>
</body>
</html>